// 全局样式重置
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  background: linear-gradient(135deg, $dark-bg 0%, $darker-bg 100%);
  color: $text-primary;
  overflow-x: hidden;
  overflow-y: auto;
}

// 滚动条样式
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;

  &:hover {
    background: rgba(255, 255, 255, 0.5);
  }
}

// 通用样式类
.flex {
  display: flex;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flex-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.flex-column {
  display: flex;
  flex-direction: column;
}

.text-center {
  text-align: center;
}

.text-right {
  text-align: right;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}
.ant-alert-error {
  background-color: #f44447 !important;
}

// 古风装饰元素
.ancient-border {
  position: relative;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid $secondary-color;
    border-image: linear-gradient(45deg, transparent 30%, $secondary-color 30%, $secondary-color 70%, transparent 70%) 1;
    pointer-events: none;
  }
}

.ancient-title {
  position: relative;
  font-size: $font-size-xl;
  font-weight: bold;
  color: $secondary-color;
  text-align: center;
  margin-bottom: $spacing-lg;

  &::before,
  &::after {
    content: '◆';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: $secondary-color;
  }

  &::before {
    left: -30px;
  }

  &::after {
    right: -30px;
  }
}

// Ant Design 组件样式覆盖
.ant-layout {
  background: transparent !important;
}

.ant-layout-header {
  background: linear-gradient(90deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
  border-bottom: 1px solid $border-color;
  backdrop-filter: blur(10px);
}

.ant-layout-sider {
  background: linear-gradient(180deg, rgba(26, 26, 46, 0.95) 0%, rgba(22, 33, 62, 0.95) 100%) !important;
  border-right: 1px solid $border-color;
  backdrop-filter: blur(10px);
}

.ant-menu {
  background: transparent !important;
  border: none !important;

  .ant-menu-item {
    color: $text-secondary !important;
    margin: 8px 12px !important;
    padding: 12px 16px !important;
    height: auto !important;
    line-height: 1.4 !important;
    border-radius: $border-radius-md !important;
    transition: all 0.2s ease !important;

    &:hover {
      background: rgba(114, 46, 209, 0.2) !important;
      color: $text-primary !important;
      transform: translateX(2px) !important;
    }

    &.ant-menu-item-selected {
      background: linear-gradient(90deg, rgba(114, 46, 209, 0.3) 0%, rgba(212, 153, 10, 0.3) 100%) !important;
      color: $text-primary !important;
      transform: translateX(2px) !important;
    }

    // 菜单项图标样式
    .ant-menu-item-icon {
      font-size: 16px !important;
      margin-right: 12px !important;
    }
  }
}

.ant-card {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid $border-color !important;
  border-radius: $border-radius-lg !important;
  backdrop-filter: blur(10px);

  .ant-card-head {
    border-bottom: 1px solid $border-color !important;

    .ant-card-head-title {
      color: $text-primary !important;
    }
  }

  .ant-card-body {
    color: $text-secondary !important;
  }
}

.ant-table {
  background: transparent !important;

  // 表格容器
  .ant-table-container {
    background: transparent !important;
  }

  // 表格内容
  .ant-table-content {
    background: transparent !important;
  }

  // 表格主体
  .ant-table-tbody {
    background: transparent !important;
  }

  // 表头样式
  .ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid $border-color !important;
    color: $text-primary !important;
  }

  // 表格行样式
  .ant-table-tbody > tr {
    background: transparent;

    > td {
      background: transparent;
      border-bottom: 1px solid $border-color !important;
      color: $text-secondary !important;
      transition: background-color 0.2s ease !important;
    }

    // 悬停效果 - 使用更高优先级
    &:hover {
      background: rgba(114, 46, 209, 0.1) !important;

      > td {
        background: rgba(114, 46, 209, 0.1) !important;
      }
    }

    // 选中状态
    &.ant-table-row-selected {
      background: rgba(114, 46, 209, 0.2) !important;

      > td {
        background: rgba(114, 46, 209, 0.2) !important;
      }
    }
  }

  // 禁用默认的斑马纹效果
  &.ant-table-striped .ant-table-tbody > tr.ant-table-row:nth-child(2n) > td {
    background: transparent !important;
  }

  // 固定列样式
  .ant-table-cell-fix-left,
  .ant-table-cell-fix-right {
    background: rgba(26, 26, 46, 0.95);
  }

  // 彻底覆盖表格内所有可能的背景色
  tr,
  td,
  th,
  tbody,
  thead,
  tfoot {
    background: transparent !important;
    transition: background-color 0.2s ease !important;
  }

  // 重新设置需要背景色的元素
  .ant-table-thead > tr > th {
    background: rgba(255, 255, 255, 0.1) !important;
  }

  .ant-table-tbody > tr:hover {
    background: rgba(114, 46, 209, 0.1) !important;
  }

  .ant-table-tbody > tr:hover > td {
    background: rgba(114, 46, 209, 0.1) !important;
  }
}

// 确保奇偶行样式统一
// .ant-table-tbody > tr:nth-child(2n + 1) > td {
//   background: transparent !important;
// }

// .ant-table-tbody > tr:nth-child(2n) > td {
//   background: transparent !important;
// }

// 额外的强制性样式覆盖
.ant-table-wrapper {
  .ant-table {
    background: transparent !important;

    // 防止任何默认背景色
    tr,
    td,
    th {
      background: transparent;
      transition: all 0.2s ease !important;
    }

    // 重新定义hover效果
    tbody tr:hover {
      background: rgba(114, 46, 209, 0.1) !important;

      td {
        background: rgba(114, 46, 209, 0.1) !important;
      }
    }

    // 表头样式
    thead th {
      background: rgba(255, 255, 255, 0.1) !important;
    }
  }
}
.ant-input-affix-wrapper {
  box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
}
// Input 输入框样式覆盖
.ant-input {
  background: transparent !important;
  color: $text-primary !important;

  &:focus,
  &.ant-input-focused {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
  }

  &::placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
  }
}

// TextArea 文本域样式
.ant-input.ant-input-textarea {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: $text-primary !important;

  &:hover {
    border-color: $primary-color !important;
  }

  &:focus,
  &.ant-input-focused {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
  }
}

// Select 下拉框样式覆盖
.ant-select {
  .ant-select-selector {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: $text-primary !important;
  }

  &:hover .ant-select-selector {
    border-color: $primary-color !important;
  }

  &.ant-select-focused .ant-select-selector,
  &.ant-select-open .ant-select-selector {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
  }

  .ant-select-selection-placeholder {
    color: rgba(255, 255, 255, 0.45) !important;
  }

  .ant-select-selection-item {
    color: $text-primary !important;
  }

  .ant-select-arrow {
    color: rgba(255, 255, 255, 0.65) !important;
  }
}

// Select 下拉菜单样式
.ant-select-dropdown {
  background: rgba(22, 33, 62, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(10px);

  .ant-select-item {
    color: $text-secondary !important;
    background: transparent !important;

    &:hover {
      background: rgba(114, 46, 209, 0.2) !important;
      color: $text-primary !important;
    }

    &.ant-select-item-option-selected {
      background: rgba(114, 46, 209, 0.3) !important;
      color: $text-primary !important;
    }

    &.ant-select-item-option-active {
      background: rgba(114, 46, 209, 0.2) !important;
      color: $text-primary !important;
    }
  }
}

// InputNumber 数字输入框样式
.ant-input-number {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  &:hover {
    border-color: $primary-color !important;
  }

  &:focus,
  &.ant-input-number-focused {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
  }

  .ant-input-number-input {
    background: transparent !important;
    color: $text-primary !important;
  }

  .ant-input-number-handler-wrap {
    background: rgba(255, 255, 255, 0.05) !important;
    border-left: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  .ant-input-number-handler {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.65) !important;

    &:hover {
      color: $primary-color !important;
    }
  }
}

// DatePicker 日期选择器样式
.ant-picker {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: $text-primary !important;

  &:hover {
    border-color: $primary-color !important;
  }

  &.ant-picker-focused {
    border-color: $primary-color !important;
    box-shadow: 0 0 0 2px rgba(114, 46, 209, 0.2) !important;
  }

  .ant-picker-input > input {
    color: $text-primary !important;
    background: transparent !important;

    &::placeholder {
      color: rgba(255, 255, 255, 0.45) !important;
    }
  }

  .ant-picker-suffix {
    color: rgba(255, 255, 255, 0.65) !important;
  }
}

// DatePicker 弹出面板样式
.ant-picker-dropdown {
  .ant-picker-panel-container {
    background: rgba(22, 33, 62, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);
  }
}

// Form 表单样式
.ant-form-item {
  .ant-form-item-label > label {
    color: $text-primary !important;
  }

  .ant-form-item-explain-error {
    color: #ff4d4f !important;
  }

  .ant-form-item-explain-success {
    color: $secondary-color !important;
  }
}

// Radio 单选框样式
.ant-radio-group {
  .ant-radio-button-wrapper {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: $text-secondary !important;

    &:hover {
      border-color: $primary-color !important;
      color: $text-primary !important;
    }

    &.ant-radio-button-wrapper-checked {
      background: rgba(114, 46, 209, 0.3) !important;
      border-color: $primary-color !important;
      color: $text-primary !important;
    }
  }
}

// Checkbox 复选框样式
.ant-checkbox-wrapper {
  color: $text-secondary !important;

  &:hover {
    color: $text-primary !important;
  }

  .ant-checkbox {
    .ant-checkbox-inner {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
    }

    &.ant-checkbox-checked .ant-checkbox-inner {
      background: $primary-color !important;
      border-color: $primary-color !important;
    }

    &:hover .ant-checkbox-inner {
      border-color: $primary-color !important;
    }
  }
}

// Switch 开关样式
.ant-switch {
  background: rgba(255, 255, 255, 0.2) !important;

  &.ant-switch-checked {
    background: $primary-color !important;
  }

  &:hover:not(.ant-switch-disabled) {
    background: rgba(255, 255, 255, 0.3) !important;
  }

  &.ant-switch-checked:hover:not(.ant-switch-disabled) {
    background: #9254de !important;
  }
}

// Slider 滑块样式
.ant-slider {
  .ant-slider-rail {
    background: rgba(255, 255, 255, 0.2) !important;
  }

  .ant-slider-track {
    background: $primary-color !important;
  }

  .ant-slider-handle {
    border: 2px solid $primary-color !important;
    background: $primary-color !important;

    &:hover,
    &:focus {
      border-color: #9254de !important;
      box-shadow: 0 0 0 5px rgba(114, 46, 209, 0.2) !important;
    }
  }
}

// Upload 上传组件样式
.ant-upload {
  &.ant-upload-drag {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 2px dashed rgba(255, 255, 255, 0.2) !important;

    &:hover {
      border-color: $primary-color !important;
    }

    .ant-upload-drag-container {
      color: $text-secondary !important;
    }
  }

  .ant-upload-list-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: $text-secondary !important;
  }
}

// Dropdown 下拉菜单样式
.ant-dropdown {
  .ant-dropdown-menu {
    background: rgba(22, 33, 62, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(10px);

    .ant-dropdown-menu-item {
      color: $text-secondary !important;

      &:hover {
        background: rgba(114, 46, 209, 0.2) !important;
        color: $text-primary !important;
      }
    }
  }
}

// Pagination 分页样式
.ant-pagination {
  .ant-pagination-item {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;

    a {
      color: $text-secondary !important;
    }

    &:hover {
      border-color: $primary-color !important;

      a {
        color: $text-primary !important;
      }
    }

    &.ant-pagination-item-active {
      background: $primary-color !important;
      border-color: $primary-color !important;

      a {
        color: #ffffff !important;
      }
    }
  }

  .ant-pagination-prev,
  .ant-pagination-next {
    .ant-pagination-item-link {
      background: rgba(255, 255, 255, 0.05) !important;
      border: 1px solid rgba(255, 255, 255, 0.2) !important;
      color: $text-secondary !important;

      &:hover {
        border-color: $primary-color !important;
        color: $text-primary !important;
      }
    }
  }
}

// Button 按钮全局样式
.ant-btn {
  // Link 类型按钮使用金色主题
  &.ant-btn-link {
    color: #ffd700 !important;
    border: none !important;
    padding: 0 !important;
    height: auto !important;
    box-shadow: none !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
    transition: all 0.3s ease !important;

    &:hover {
      color: #ffed4e !important; // 更亮的金色
      text-shadow: 0 1px 4px rgba(255, 215, 0, 0.4) !important;
      transform: translateY(-1px) !important;
    }

    &:focus {
      color: #ffd700 !important;
      box-shadow: none !important;
    }

    &:active {
      color: #e6c200 !important; // 稍暗的金色
      transform: translateY(0) !important;
    }

    &[disabled],
    &.ant-btn-disabled {
      color: rgba(255, 215, 0, 0.3) !important;
      cursor: not-allowed !important;
      text-shadow: none !important;
      transform: none !important;

      &:hover {
        color: rgba(255, 215, 0, 0.3) !important;
        text-shadow: none !important;
        transform: none !important;
      }
    }

    // 危险状态的link按钮
    &.ant-btn-dangerous {
      color: #ff4d4f !important;

      &:hover {
        color: #ff7875 !important;
        text-shadow: 0 1px 4px rgba(255, 77, 79, 0.4) !important;
      }

      &:focus {
        color: #ff4d4f !important;
      }

      &:active {
        color: #d9363e !important;
      }
    }
  }
}

// ECharts 图表容器和 loading 样式
.echarts-container {
  position: relative;
  background: rgba(26, 26, 46, 0.3) !important;
  border-radius: $border-radius-lg;
  backdrop-filter: blur(4px);
  border: 1px solid $border-color;
  overflow: hidden;

  // Loading 遮罩层
  .echarts-loading-mask {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(22, 33, 62, 0.85) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  // Loading 文字
  .echarts-loading-text {
    color: $text-primary;
    font-size: $font-size-md;
    margin-top: $spacing-md;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  }

  // Loading 动画
  .echarts-loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid $primary-color;
    border-radius: 50%;
    border-top-color: transparent;
    animation: echarts-spin 1s linear infinite;
    box-shadow: 0 0 10px rgba(114, 46, 209, 0.3);
  }
}

// Loading 动画关键帧
@keyframes echarts-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
